import React from 'react';

import { Card, Form, Row, Col, Input, Button, Table, Tabs, Radio, Alert, Checkbox, Select } from 'antd';

import { FormInstance } from 'antd/lib/form';

import { history } from 'umi';

const {Option} = Select

const tabListNoTitle = [
  {
    key: 'article',
    tab: '媒体资源',
  },
  {
    key: 'app',
    tab: '自媒体资源',
  },
];



const plainOptions = [
	'新闻资讯','IT科技数码','财经商业','生活消费','女性时尚','娱乐休闲','游戏动漫',
	'汽车','酒店旅游','健康医疗','房产家居','母婴亲子','体育运动','教育培训','文化艺术',
	'食品餐饮','工业能源','贸易物流','法制舆情','农业园艺','慈善公益','区块链','其他'
];

const plainOptions1 = [
	'周末可出','白名单','首页推荐','移动客户端','站长专区'
]

const plainOptions2 = [
	'文本网址','关键词链接','QQ/微信','电话','二维码'
]

const plainOptions3 = [
	'微商','加盟','医疗','留学','虚拟币','移民生子','美容护肤','p2p网贷'
]

const lists8 = [
	'不限',
	'全国',
	'A 安徽',
	'B 北京',
	'C 重庆',
	'F 福建',
	'G 广东',
	'G 贵州',
	'G 甘肃',
	'G 广西',
	'G 港澳台',
	'H 河北',
	'H 黑龙江',
	'H 河南',
	'H 湖北',
	'H 湖南',
	'H 海南',
	'J 吉林',
	'J 江苏',
	'J 江西',
	'L 辽宁',
	'N 内蒙古',
	'N 宁夏',
	'Q 青海',
	'S 山西',
	'S 上海',
	'S 山东',
	'S 四川',
	'S 陕西',
	'T 天津',
	'X 西藏',
	'X 新疆',
	'Y 云南',
	'Z 浙江'
]

class Article extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<div>
				<Form ref={this.formRef} >
					<Row > 
						<Col span="8">
							<Form.Item
								label="媒体名称"
								name="username"
						    >
						    	<Input placeholder="主站名称-频道名称 （例：新浪网-科技）" />
						    </Form.Item>
					    </Col>
					    <Col span="16">
					    	<Button type="primary" style={{marginLeft: 10}}>自动补充</Button>
					    </Col>
				    </Row>
				    <Form.Item
				        label="资源价格"
				        name="username1"
				    >
				    	<Input style={{width: 200}} placeholder="100.00" />
				    </Form.Item>
				    <Form.Item
				        label="频道类型"
				        name="username2"
				    >
				    	<Checkbox.Group options={plainOptions}/>
				    </Form.Item>
				    <Form.Item
				        label="媒体标签"
				        name="username3"
				    >
				    	<Checkbox.Group options={plainOptions1}/>
				    </Form.Item>
				    <Form.Item
				        label="可带信息"
				        name="username4"
				    >
				    	<Checkbox.Group options={plainOptions2}/>
				    </Form.Item>
				    <Form.Item
				        label="特殊稿件"
				        name="username5"
				    >
				    	<Checkbox.Group options={plainOptions3}/>
				    </Form.Item>
				    <Row gutter={16}>
				    	<Col span="8">
				    		<Form.Item
						        label="入口级别"
						        name="username6"
						    >
						    	<Select placeholder="请选择">
						    		<Option value="1">上级栏目</Option>
						    		<Option value="2">首页入口</Option>
						    		<Option value="3">频道入口</Option>
						    		<Option value="4">没有入口</Option>
						    	</Select>
						    </Form.Item>
				    	</Col>
				    	<Col span="8">
				    		<Form.Item
						        label="所属区域"
						        name="username12"
						    >
						    	<Select placeholder="请选择">
						    		{
						    			lists8.map(item => (
						    				<Option value={item} key={item}>{item}</Option>
						    			))
						    		}
						    	</Select>
						    </Form.Item>
				    	</Col>
				    </Row>
				    
				    <Row gutter={16}>
				    	<Col span="16">
				    		<Form.Item
						        label="入口链接"
						        name="username13"
						    >
						    	<Input placeholder="http://..." />
						    </Form.Item>
				    	</Col>
				    	<Col span="16">
				    		<Form.Item
						        label="发布案例"
						        name="username14"
						    >
						    	<Input placeholder="http://..." />
						    </Form.Item>
				    	</Col>
				    </Row>
				    <Row gutter={16}>
				    	<Col span="8">
						    <Form.Item
						        label="网站类型"
						        name="username15"
						    >	
						    	<Select placeholder="请选择">
						    		<Option value="1">中国五大门户</Option>
						    		<Option value="2">中央新闻门户</Option>
						    		<Option value="3">全国商业门户</Option>
						    		<Option value="4">地方重点门户</Option>
						    		<Option value="5">地方商业门户</Option>
						    		<Option value="6">海外媒体</Option>
						    	</Select>
						    </Form.Item>
					    </Col>
					    <Col span="8">
						    <Form.Item
						        label="收录类型"
						        name="username16"
						    >
						    	<Select placeholder="请选择">
						    		<Option value="1">包网页收录</Option>
						    		<Option value="2">网页收录</Option>
						    		<Option value="3">包百度源新闻收录</Option>
						    		<Option value="4">百度源新闻收录</Option>
						    	</Select>
						    </Form.Item>
					    </Col>
				    </Row>
				    <Row gutter={16}>
				    	<Col span="8">
						    <Form.Item
						        label="出稿速度"
						        name="username111"
						    >
						    	<Select placeholder="请选择">
						    		<Option value="1">1小时</Option>
						    		<Option value="2">2小时</Option>
						    		<Option value="3">3小时</Option>
						    		<Option value="4">4小时</Option>
						    		<Option value="5">当日</Option>
						    		<Option value="6">次日</Option>
						    	</Select>
						    </Form.Item>
					    </Col>
					    <Col span="8">
						    <Form.Item
						        label="截稿时间"
						        name="username113"
						    >
						    	<Input  />
						    </Form.Item>
					    </Col>
				    </Row>
				    <Row gutter={16}>
				    	<Col span="16">
						    <Form.Item
						        label="备注说明"
						        name="username112"
						    >
						    	<Input placeholder="如有特殊要求，请一定要在这里说明清楚。"  />
						    </Form.Item>
					    </Col>
				    </Row>
				    <Form.Item>
				    	<div style={{marginLeft: 70}}>
				    		<Button type="primary">添加媒体</Button>
				    		<Button style={{marginLeft: 10}}>重置</Button>
				    		<Button style={{marginLeft: 10}} onClick={() => {history.push('/mediaCenter/myResources/list')}}>返回列表</Button>
				    	</div>
				    </Form.Item>
				</Form>
			</div>
		)
	}
}


const plainOptions4 = [
	'周末可出','可发视频','官方号','移动端'
]

const plainOptions5 = [
	'文本网址','关键词链接','QQ/微信','电话','二维码'
]

const list11 = [
	'A 爱奇艺',
	'A 艾瑞网',
	'B 百家号',
	'B 北京时间',
	'D 东方头条',
	'D 豆瓣',
	'D 东方财富',
	'F 凤凰号',
	'J 今日头条',
	'J 简书',
	'J 金色财经',
	'J 中国焦点网',
	'K 快传号',
	'L 驴妈妈旅游',
	'M 马蜂窝',
	'Q 汽车之家',
	'Q 趣头条',
	'Q 汽车头条',
	'Q 汽车行家（太平洋）',
	'Q 去哪儿',
	'R 人民号',
	'S 搜狐网',
	'T 腾讯号',
	'T 途牛',
	'T 天涯',
	'T 同花顺',
	'U C头条',
	'W 网易号',
	'X 新浪号',
	'X 小红书',
	'X 雪球',
	'Y 易车号',
	'Y 一点资讯',
	'Z 知乎',
	'Z 中金在线',
	'X 携程',
	'X 熊掌号',
	'其他'
]

const list12 = [
	'C 财经',
	'D 动漫',
	'F 房产家居',
	'G 公益',
	'J 健康',
	'J 教育',
	'K 科技',
	'L 历史',
	'L 旅游',
	'M 美食',
	'M 母婴',
	'Q 汽车',
	'S 三农',
	'S 社会',
	'S 时尚',
	'T 体育',
	'W 文化',
	'Y 游戏',
	'Y 娱乐',
	'Z 综合'
]

class App extends React.Component{
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<>
				<Form ref={this.formRef} >
					<Form.Item label="帐号名称">
						<Input  placeholder="请输入账号名称" />
					</Form.Item>
					<Form.Item
				        label="资源价格"
				        name="username1"
				    >
				    	<Input style={{width: 200}} placeholder="100.00" />
				    </Form.Item>
				    <Form.Item
				        label="媒体标签"
				        name="username2"
				    >
				    	<Checkbox.Group options={plainOptions4}/>
				    </Form.Item>
				    <Form.Item
				        label="可带信息"
				        name="username3"
				    >
				    	<Checkbox.Group options={plainOptions5}/>
				    </Form.Item>
				    <Row gutter={16}>
				    	<Col span={8}>
				    		<Form.Item
						        label="粉丝数"
						        name="username4"
						    >
						    	<Input  />
						    </Form.Item>
				    	</Col>
				    	<Col span={8}>
				    		<Form.Item
						        label="平均阅读数"
						        name="username5"
						    >
						    	<Input  />
						    </Form.Item>
				    	</Col>
				    </Row>
				    <Row gutter={16}>
				    	<Col span={8}>
				    		<Form.Item
						        label="媒体平台"
						        name="username6"
						    >
						    	<Select placeholder="请选择">
						    		{
						    			list11.map(item => (
						    				<Option value={item} key={item}>{item}</Option>
						    			))
						    		}
						    	</Select>
						    </Form.Item>
				    	</Col>
				    	<Col span={8}>
				    		<Form.Item
						        label="行业类型"
						        name="username7"
						    >
						    	<Select placeholder="请选择">
						    		{
						    			list12.map(item => (
						    				<Option value={item} key={item}>{item}</Option>
						    			))
						    		}
						    	</Select>
						    </Form.Item>
				    	</Col>
				    </Row>
				    <Row>
					    <Col span={16}>
						    <Form.Item
						        label="发布案例"
						        name="username8"
						    >
						    	<Input placeholder="http://..." />
						    </Form.Item>
					    </Col>
				    </Row>
				    <Row>
				    	<Col span={8}>
				    		<Form.Item
						        label="所属区域"
						        name="username9"
						    >
						    	<Select placeholder="请选择">
						    		{
						    			lists8.map(item => (
						    				<Option value={item} key={item}>{item}</Option>
						    			))
						    		}
						    	</Select>
						    </Form.Item>
				    	</Col>
				    </Row>
				    <Row gutter={16}>
				    	<Col span={8}>
					    	<Form.Item
						        label="出稿速度"
						        name="username11"
						    >
						    	<Select placeholder="请选择">
						    		<Option value="1">1小时</Option>
						    		<Option value="2">2小时</Option>
						    		<Option value="3">3小时</Option>
						    		<Option value="4">4小时</Option>
						    		<Option value="5">当日</Option>
						    		<Option value="6">次日</Option>
						    	</Select>
						    </Form.Item>
					    </Col>
					    <Col span={8}>
					    	<Form.Item
						        label="截稿时间"
						        name="username12"
						    >
						    	<Input />
						    </Form.Item>
					    </Col>
				    </Row>
				    <Row>
				    	<Col span={16}>
						    <Form.Item
						        label="备注说明"
						        name="username13"
						    >
						    	<Input placeholder="如有特殊要求，请一定要在这里说明清楚。" />
						    </Form.Item>
					    </Col>
				    </Row>
				    <Form.Item
				    >	
				    	<div style={{marginLeft: 70}}>
				    		<Button type="primary">添加媒体</Button>
			    			<Button style={{marginLeft: 10}}>重置</Button>
			    			<Button style={{marginLeft: 10}} onClick={() => {history.push('/mediaCenter/myResources/list')}}>返回列表</Button>
				    	</div>
				    	
				    </Form.Item>
				</Form>
			</>
		)
	}
}



export default class Create extends React.Component{
	state = {
	    key: 'tab1',
	    noTitleKey: 'article',
  	};
  	onTabChange = (key, type) => {
	    console.log(key, type);
	    this.setState({ [type]: key });
  	};
	render(){
		const contentListNoTitle = {
		  article: <Article />,
		  app: <App />
		};
		return (
			<>
				
				<Card
					title={<Alert
			      message="温馨提示"
			      description={(
			      	<>
			      		<div>1. 为避免错过订单，请入驻媒体编辑们不要关闭本平台网页，有订单后将会第一时间接到本网站弹窗提示！</div>
			      		<div>2. 为避免错过订单，您也可以开启订单消息QQ自动推送功能，便于QQ接收新订单提醒消息。</div>
			      		<div style={{color: 'red'}}>3. 稿件时效默认为1个月，如不包时效,请备注写明。</div>
			      	</>
			      )}
			      type="info"
			      showIcon
			    />}
		          style={{ width: '100%' }}
		          tabList={tabListNoTitle}
		          activeTabKey={this.state.noTitleKey}
		          tabBarExtraContent={<a href="#">More</a>}
		          onTabChange={key => {
		            this.onTabChange(key, 'noTitleKey');
		          }}
		        >
		          {contentListNoTitle[this.state.noTitleKey]}
		        </Card>
			</>
		)
	}
}
